<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Floating Action Button - Translucent</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Floating Action Button - Translucent</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content fullscreen>
        <ion-grid>
          <ion-row>
            <ion-col size="6"><f class="red"></f></ion-col>
            <ion-col size="6"><f class="green"></f></ion-col>
            <ion-col size="6"><f class="blue"></f></ion-col>
            <ion-col size="6"><f class="yellow"></f></ion-col>
            <ion-col size="6"><f class="pink"></f></ion-col>
            <ion-col size="6"><f class="purple"></f></ion-col>
            <ion-col size="6"><f class="black"></f></ion-col>
            <ion-col size="6"><f class="orange"></f></ion-col>
          </ion-row>
        </ion-grid>

        <pre id="log" style="right: 10px; bottom: 50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24)" slot="fixed">log</pre>
        <ion-button>Test</ion-button>

        <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
          <ion-fab-button translucent onclick="clickMainFAB('fab1')" size="small" class="e2eFabTopRight"
            ><ion-icon name="add"></ion-icon
          ></ion-fab-button>
          <ion-fab-list>
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab1')"
              ><ion-icon name="logo-facebook"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab1')"
              ><ion-icon name="logo-twitter"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab1')"
              ><ion-icon name="logo-vimeo"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('instagram', 'fab1')"
              ><ion-icon name="logo-instagram"></ion-icon
            ></ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
          <ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"
            ><ion-icon name="arrow-back-circle"></ion-icon
          ></ion-fab-button>
          <ion-fab-list side="start">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"
              ><ion-icon name="logo-facebook"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab2')"
              ><ion-icon name="logo-twitter"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab2')"
              ><ion-icon name="logo-vimeo"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('instagram', 'fab2')"
              ><ion-icon name="logo-instagram"></ion-icon
            ></ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
          <ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"
            ><ion-icon name="arrow-forward-circle"></ion-icon
          ></ion-fab-button>
          <ion-fab-list side="end">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"
              ><ion-icon name="logo-facebook"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab3')"
              ><ion-icon name="logo-twitter"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab3')"
              ><ion-icon name="logo-vimeo"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('instagram', 'fab3')"
              ><ion-icon name="logo-instagram"></ion-icon
            ></ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
          <ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"
            ><ion-icon name="arrow-up-circle"></ion-icon
          ></ion-fab-button>
          <ion-fab-list side="top">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab4')"
              ><ion-icon name="logo-facebook"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab4')"
              ><ion-icon name="logo-twitter"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab4')"
              ><ion-icon name="logo-vimeo"></ion-icon
            ></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('instagram', 'fab4')"
              ><ion-icon name="logo-instagram"></ion-icon
            ></ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab horizontal="center" vertical="center" id="fab5" slot="fixed">
          <ion-fab-button translucent onclick="clickMainFAB('fab5')" class="e2eFabCenter"
            ><ion-icon name="share"></ion-icon
          ></ion-fab-button>
          <ion-fab-list side="top">
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab5')" color="primary"
              ><ion-icon name="logo-vimeo"></ion-icon
            ></ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="bottom">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab5')" color="secondary"
              ><ion-icon name="logo-facebook"></ion-icon
            ></ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="start">
            <ion-fab-button translucent onclick="openSocial('instagram', 'fab5')" color="light"
              ><ion-icon name="logo-instagram"></ion-icon
            ></ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="end">
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab5')" color="dark"
              ><ion-icon name="logo-twitter"></ion-icon
            ></ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab horizontal="end" vertical="center" slot="fixed">
          <ion-fab-button translucent color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
        </ion-fab>
      </ion-content>

      <ion-footer>
        <ion-toolbar>
          <ion-title>Footer</ion-title>
        </ion-toolbar>
      </ion-footer>

      <script>
        function insertAfter(el, referenceNode) {
          referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
        }

        function insertLog(message) {
          console.log(message);
          var el = document.querySelector('#log');
          const oldHTML = el.innerHTML;
          el.innerHTML = oldHTML + '\n' + message;
        }

        function add() {
          var newEle = document.createElement('f');
          var ref = document.querySelector('f');
          insertAfter(newEle, ref);
          insertLog('add');
        }

        function clickMainFAB(container) {
          let message = 'Clicked open social menu';
          insertLog(message);

          openLists(container);
        }

        function openSocial(network, container) {
          let message = 'Share in ' + network;
          insertLog(message);

          openLists(container);
        }

        function openLists(container) {
          var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');

          for (var i = 0; i < fabLists.length; i++) {
            fabLists[i].activated = true;
          }
        }
      </script>

      <style>
        f {
          display: block;
          background: blue;

          width: 100%;
          height: 200px;
          margin: 20px auto;
        }

        .red {
          background-color: #ea445a;
        }

        .green {
          background-color: #76d672;
        }

        .blue {
          background-color: #3478f6;
        }

        .yellow {
          background-color: #ffff80;
        }

        .pink {
          background-color: #ff6b86;
        }

        .purple {
          background-color: #7e34f6;
        }

        .black {
          background-color: #000;
        }

        .orange {
          background-color: #f69234;
        }
      </style>
    </ion-app>
  </body>
</html>
